@import "../commons/variables.scss";
@import "../commons/px2rem.scss";

.juheh5-pay {
    .account-header {
        border-top-left-radius: px2rem(8);
        border-top-right-radius: px2rem(8);
        height: px2rem(32);
        line-height: px2rem(32);
        text-align: center;
        font-size: px2rem(32);
        color: #d8d8db;
        font-weight: 400;
        padding-top: px2rem(20);

        .back-icon {
            position: absolute;
            top: px2rem(20);
            left: px2rem(30);
            color: #fff;
            cursor: pointer;

            .bi-chevron-left {
                width: px2rem(25);
                height: px2rem(25);
            }
        }
    }

    .account-content {
        width: 85%;
        height: auto;
        margin: px2rem(35) auto;

        .bind-bottom-tips {
            color: #d8d8db;
            font-size: px2rem(20);
            text-align: left;
        }
    }

    .pay-content {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        padding-top: px2rem(20);
        padding-bottom: px2rem(45);
        border-bottom-left-radius: px2rem(8);
        border-bottom-right-radius: px2rem(8);

        .order-info {
            width: 90%;
            text-align: center;
            margin: 0 auto;
            padding-bottom: px2rem(20);

            .order-amount {
                color: #fff;
                font-size: px2rem(48);

                .amount {
                    font-weight: 700;
                    font-size: px2rem(48);
                }
            }
        }

        .pay-type-box {
            width: 90%;
            margin: px2rem(25) auto auto;
            display: flex;
            align-items: center;
            justify-content: center;

            .type-item {
                text-align: center;
                width: 100vw;
                height: px2rem(140);
                background-color: #31323e;
                border-radius: px2rem(4);
                box-sizing: border-box;
                padding-top: px2rem(10);
                cursor: pointer;
                margin-left: px2rem(12);

                .alipay-icon {
                    position: relative;
                    margin: 0 auto;
                    top: (px2rem(12));
                    width: px2rem(50);
                    height: px2rem(80);
                }

                .wxpay-icon {
                    position: relative;
                    margin: 0 auto;
                    top: (px2rem(12));
                    width: px2rem(60);
                    height: px2rem(80);
                }

                .item-text {
                    position: relative;
                    width: 100%;
                    height: px2rem(30);
                    line-height: px2rem(30);
                    color: #d8d8db;
                    font-size: px2rem(22);
                    font-weight: 400;
                }
            }
        }
    }
}
